<template>
  <basic-container>
    <el-row :span="24">
      <el-col :span="12">
        <v-chart :options="useKeyCumulate" />
      </el-col>
      <el-col :span="12">
        <avue-data-display :option="infomationCumulate" />
      </el-col>
    </el-row>
    <el-row :span="24">
      <el-col :span="12">
        <v-chart :options="memoryCumulate" />
      </el-col>
      <el-col :span="12">
        <v-chart :options="dbSizeCumulate" />
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import ECharts from "vue-echarts";
import "echarts/lib/chart/line";
import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/markLine";
import { fetchInfo } from "@/api/monitor/monitor";

export default {
  components: {
    "v-chart": ECharts
  },

  data () {
    return {
      activeName: "first",
      timer: undefined,
      memoryCumulate: {
        color: ["#409EFF", "#FFCC99"],
        title: {
          text: "Redis 内存情况"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["分配内存", "消耗峰值"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} M"
          }
        },
        series: [{
          name: "分配内存",
          data: [],
          type: "line",
          itemStyle: {
            normal: {
              lineStyle: {
                width: 3// 设置线条粗细
              }
            }
          },
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [
              { type: "average", name: "平均值" }
            ]
          }
        }, {
          name: "消耗峰值",
          data: [],
          type: "line",
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#ffcc99",
                width: 3// 设置线条粗细
              }
            }
          },
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [
              { type: "average", name: "平均值" }
            ]
          }
        }]
      },
      dbSizeCumulate: {
        color: ["#409EFF"],
        title: {
          text: "Redis Key 数量"
        },
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 个"
          }
        },
        series: [{
          data: [],
          type: "line",
          itemStyle: {
            normal: {
              lineStyle: {
                width: 3// 设置线条粗细
              }
            }
          },
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          }
        }]
      },
      useKeyCumulate: {
        backgroundColor: {
          image: undefined,
          repeat: "repeat"
        },
        title: {
          text: "命令统计",
          textStyle: {
            color: "#235894"
          }
        },
        tooltip: {},
        series: [{
          name: "pie",
          type: "pie",
          selectedMode: "single",
          selectedOffset: 30,
          clockwise: true,
          label: {
            normal: {
              textStyle: {
                fontSize: 18,
                color: "#235894"
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: "#235894"
              }
            }
          },
          data: [],
          itemStyle: {
            normal: {
              opacity: 0.7,
              color: {
                image: undefined,
                repeat: "repeat"
              },
              borderWidth: 3,
              borderColor: "#235894"
            }
          }
        }]
      },
      infomationCumulate: {
        data: [
          {
            count: "",
            title: "Redis版本"
          },
          {
            count: "",
            title: "运行模式"
          },
          {
            count: "",
            title: "监听端口"
          },
          {
            count: "",
            title: "已连客户端"
          },
          {
            count: "",
            title: "启动秒数"
          },
          {
            count: "",
            title: "启动天数"
          },
          {
            count: "",
            title: "内存限制"
          },
          {
            count: "",
            title: "系统内存"
          },
          {
            count: "",
            title: "是否启动AOF"
          },
          {
            count: "",
            title: "RDB是否成功"
          },
          {
            count: "",
            title: "网络入口"
          },
          {
            count: "",
            title: "网络出口"
          }
        ]
      }
    };
  },
  beforeDestroy () {
    clearInterval(this.timer);
  },
  created () {
    const piePatternSrc = "";
    const piePatternImg = new Image();
    piePatternImg.src = piePatternSrc;
    const bgPatternImg = new Image();
    // bgPatternImg.src = bgPatternSrc;
    this.useKeyCumulate.backgroundColor.image = bgPatternImg;
    this.useKeyCumulate.series[0].itemStyle.normal.color.image = piePatternImg;
    this.getInfo();
    clearInterval(this.timer);
    this.timer = setInterval(() => {
      this.getInfo();
    }, 3000);
  },
  methods: {
    getInfo: function () {
      fetchInfo().then(response => {
        this.memoryCumulate.series[0].data.push(parseFloat(response.data.data.info.used_memory_human));
        this.memoryCumulate.series[1].data.push(parseFloat(response.data.data.info.used_memory_peak_human));
        this.memoryCumulate.xAxis.data.push(response.data.data.time);
        // eslint-disable-next-line radix
        this.dbSizeCumulate.series[0].data.push(parseInt(response.data.data.dbSize));
        this.dbSizeCumulate.xAxis.data.push(response.data.data.time);
        this.useKeyCumulate.series[0].data = response.data.data.commandStats;

        // infomation
        this.infomationCumulate.data[0].count = response.data.data.info.redis_version;
        this.infomationCumulate.data[1].count = response.data.data.info.redis_mode;
        this.infomationCumulate.data[2].count = response.data.data.info.tcp_port;
        this.infomationCumulate.data[3].count = response.data.data.info.connected_clients;
        this.infomationCumulate.data[4].count = response.data.data.info.uptime_in_seconds;
        this.infomationCumulate.data[5].count = response.data.data.info.uptime_in_days;
        this.infomationCumulate.data[6].count = response.data.data.info.maxmemory;
        this.infomationCumulate.data[7].count = response.data.data.info.maxmemory_human;
        this.infomationCumulate.data[8].count = response.data.data.info.aof_enabled;
        this.infomationCumulate.data[9].count = response.data.data.info.rdb_last_bgsave_status;
        this.infomationCumulate.data[10].count = response.data.data.info.instantaneous_input_kbps + "kps";
        this.infomationCumulate.data[11].count = response.data.data.info.instantaneous_output_kbps + "kps";

        // 删除第一个元素
        if (this.memoryCumulate.series[0].data.length > 7) {
          this.memoryCumulate.series[0].data.shift();
          this.memoryCumulate.series[1].data.shift();
          this.dbSizeCumulate.series[0].data.shift();
          this.memoryCumulate.xAxis.data.shift();
          this.dbSizeCumulate.xAxis.data.shift();
        }
      });
    }
  }
};
</script>
